<template>
  <div class="form">
    <van-field
      v-model="mobile"
      type="tel"
      maxlength="11"
      placeholder="请输入手机号"
      class="login-form login-phone"
    />
    <div class="login-form-password">
      <van-field
        v-model="pwd"
        autocomplete="off"
        :type="seePassword"
        placeholder="请输入密码"
        class="login-form login-password"
      />
      <img
        v-if="seePassword === 'text' && pwd === ''"
        src="~assets/login/see_no_password.png"
        class="control-see"
        @click="onChangeType"
      >
      <img
        v-if="seePassword === 'text' && pwd !== ''"
        src="~assets/login/see_password.png"
        class="control-see"
        @click="onChangeType"
      >
      <img
        v-if="seePassword === 'password' && pwd === ''"
        src="~assets/login/no_see_gray.png"
        class="control-see no-see"
        @click="onChangeType"
      >
      <img
        v-if="seePassword === 'password' && pwd !== ''"
        src="~assets/login/no_see.png"
        class="control-see no-see"
        @click="onChangeType"
      >
    </div>
    <div class="login-form-recommend-code">
      <van-field
        v-model="recommendCode"
        :disabled="disabled"
        placeholder="推荐码（若无人邀请，可不填）"
        class="login-form login-password"
      />
    </div>
    <div class="agreement">
      <van-checkbox
        v-model="agreement"
        shape="square"
      >
        我已阅读并同意
      </van-checkbox>
      <span
        class="user-agreement"
        @click="goAgreement"
      >
        《用户协议》
      </span>
    </div>
    <van-button
      size="large"
      class="login-button"
      @click="validateForm"
    >
      注册
    </van-button>
    <div
      class="go-login"
      @click="goLogin"
    >
      已有平台账号，直接登录
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { REGISTER, LOGIN } from '@/store/mutations'
import { MOBILE_STR, PWD_REG_STR, PWD_TIP } from '@/lib/reg'
import mixins from 'vue-typed-mixins'
import iosBlur from '@/mixins/iosBlur'
const phoneReg = new RegExp(MOBILE_STR)
const pwdReg = new RegExp(PWD_REG_STR)
export default mixins(iosBlur).extend({
  data () {
    return {
      seePassword: 'password',
      agreement: true,
      mobile: '',
      pwd: '',
      recommendCode: '',
      disabled: false,
      getCodeDisabled: false,
    }
  },
  created () {
  },
  methods: {
    // 验证表单
    validateForm () {
      if (this.mobile === '') {
        this.$toast('手机号不能为空！')
      } else if (!phoneReg.test(this.mobile)) {
        this.$toast('手机号格式错误！')
      } else if (this.pwd === '') {
        this.$toast('密码不能为空！')
      } else if (!this.agreement) {
        this.$toast('请先阅读并同意《用户协议》！')
      } else {
        this.onRegister()
      }
    },
    // 注册
    onRegister () {
      this.$axios({
        url: 'ELogin/Register',
        data: {
          MobilePhone: this.mobile,
          Password: this.pwd,
          InviteCode: this.recommendCode,
        },
      }).then(res => {
        console.log('onRegister sssssssssssss', res)
        if (this.$route.name === 'register') {
          const fromPage = sessionStorage.getItem('loginFromPage')
          if (fromPage) {
            let redirectInfo = {
              from: 'home',
              query: {},
            }
            redirectInfo = JSON.parse(fromPage)
            sessionStorage.removeItem('loginFromPage')
            this.$toast({
              message: '注册成功,自动登录中...',
              duration: 2000,
            })
            setTimeout(() => {
              this.onLogin(redirectInfo)
            }, 1000)
          } else {
            this.$toast('恭喜你，注册成功！')
            this.$router.push({ name: 'login' })
          }
        } else {
          this.$toast({
            message: '注册成功,自动登录中...',
            duration: 2000,
          })
          setTimeout(() => {
            this.onLogin()
          }, 1000)
        }
      })
    },
    // 注册完后自动登录
    onLogin (redirectInfo?: any) {
      this.$store.dispatch(LOGIN, {
        userName: this.mobile,
        pwd: this.pwd,
      }).then(res => {
        if (redirectInfo) {
          const { from, query } = redirectInfo
          this.$router.replace({ name: from as string, query })
        }
      }, e => {
        this.$toast(e.message)
      })
    },
    // 切换 是否显示密码图片
    onChangeType () {
      this.seePassword = this.seePassword === 'password' ? 'text' : 'password'
    },
    // 阅读用户协议
    goAgreement () {
      this.$router.push({ name: 'agreement' })
    },
    // 已有账号去登录
    goLogin () {
      if (this.$route.name === 'register') {
        this.$router.push({ name: 'login' })
      } else {
        this.$emit('chgComp', 'LoginForm')
      }
    },
  },
})
</script>

<style lang="scss" scoped>
@import "~scss/login/login.scss";
// .login-password {
//   margin-bottom: 90px;
// }
.agreement {
  font-size: 26px;
  text-align: left;
  margin-bottom: 20px;
  /deep/ {
    .van-checkbox {
      display: inline-table;
    }
    .van-checkbox__label {
      color: #A4A9B2;
    }
    .van-checkbox__icon {
      height: 32px;
      line-height: 32px;
    }
    .van-checkbox__icon .van-icon {
      width: 32px;
      height: 32px;
    }
    .van-checkbox__icon--checked .van-icon {
      border-color: $primary-web;
      background-color: $primary-web;
    }
  }

}
.user-agreement {
  color: #0099FF;
  line-height: 40px;
}
.login-button {
  margin-bottom: 40px;
}
.go-login {
  font-size: 30px;
  color: #A4A9B2;
}
</style>
